<template>
  <div style="text-align:center">
    <el-tabs v-model="activeName" @tab-click="handleClick" size="small">
      <el-tab-pane label="iPhone 6 Plus" name="6s">
        <div class="phone-component phone6plus">
          <div class="phone-head">
            <span id="go-back">返回</span>
          </div>
          <div class="phone-content">
            <iframe class="preview-iframe" :src="iframesrc"></iframe>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="iPhone 5s" name="5s">
        <div class="phone-component phone5s">
          <div class="phone-head">
            <span id="go-back">返回</span>
          </div>
          <div class="phone-content">
            <iframe class="preview-iframe" :src="iframesrc"></iframe>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="三星Note 4" name="note">
        <div class="phone-component phonenote4">
          <div class="phone-head">
            <span id="go-back">返回</span>
          </div>
          <div class="phone-content">
            <iframe class="preview-iframe" :src="iframesrc"></iframe>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="华为P8" name="p8">
        <div class="phone-component phonep8">
          <div class="phone-head">
            <span id="go-back">返回</span>
          </div>
          <div class="phone-content">
            <iframe class="preview-iframe" :src="iframesrc"></iframe>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="小米M4" name="mi4">
        <div class="phone-component phonemi4">
          <div class="phone-head">
            <span id="go-back">返回</span>
          </div>
          <div class="phone-content">
            <iframe class="preview-iframe" :src="iframesrc"></iframe>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="iPad Air 2" name="air">
        <div class="phone-component ipadair">
          <div class="phone-head">
            <span id="go-back">返回</span>
          </div>
          <div class="phone-content">
            <iframe class="preview-iframe" :src="iframesrc"></iframe>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "preview-article",
  props: {
    content: {
      required: true
    },
    title: {
      required: true
    },
    time: {
      required: true
    },
    file: {
      required: true
    },
    author: {
      required: true
    }
  },
  data() {
    return {
      previewFormVisible: false,
      iframesrc: "",
      activeName: "6s"
    };
  },
  methods: {
    addcontent() {
      console.log(this.author);
      if (this.file) {
        this.file =
          "https://service.ccmapp.cn/videaapi/zcm/upload/page/img/videorun.png";
        var str =
          `
        <html>
          <head lang="zh-cn">
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="description" content="">
            <meta name="keywords" content="">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>` +
          this.title +
          `</title>
            <meta name="renderer" content="webkit">
            <meta http-equiv="Cache-Control" content="no-siteapp">
            <meta name="apple-mobile-web-app-title" content="AMUI React">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">
            <style type="text/css">
                html,
                body,
                p,
                span,
                img {
                  margin: 0;
                  padding: 0;
                }
                p {
                    color: #333333;
                    font-size: 16px;
                    line-height: 26px;
                  }
                .titleSize{
                    font-size: 18px;
                    display: inline-block;
                    margin: 18px 0 12px 0;
                    color: #000000;
                }
                img{
                    width:100%;
                    margin-bottom: 10px;
                    height: auto !important;
                  }
            </style>
          </head>
          <body>
          <img style="position:fixed;top:0;" src="` +
          this.file +
          `">
            <div id="root" style="margin:170px 10px 10px 10px;">
              <span class="titleSize">` +
          this.title +
          `</span>
              <p style="color:#999999;font-size:14px;margin-bottom: 8px;"> `+this.author+`&nbsp;&nbsp; ` +
          this.time +
          `&nbsp;&nbsp;</p>` +
          this.content +
          `
            </div>
          </body>
        </html>`;
      } else {
        var str =
          `
        <html>
          <head lang="zh-cn">
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="description" content="">
            <meta name="keywords" content="">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>` +
          this.title +
          `</title>
            <meta name="renderer" content="webkit">
            <meta http-equiv="Cache-Control" content="no-siteapp">
            <meta name="apple-mobile-web-app-title" content="AMUI React">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">
            <style type="text/css">
                html,
                body,
                p,
                span,
                img {
                  margin: 0;
                  padding: 0;
                }
                p {
                    color: #333333;
                    font-size: 16px;
                    line-height: 26px;
                  }
                .titleSize{
                    font-size: 22px;
                    display: inline-block;
                    margin: 18px 0 12px 0;
                    color: #000000;
                }
                img{
                    width:100%;
                    height: auto !important;
                  }
            </style>
          </head>
          <body>
            <div id="root" style="margin:0 10px 10px 10px;">
              <span class="titleSize">` +
          this.title +
          `</span>
              <p style="color:#999999;font-size:14px;margin-bottom: 8px;"> &nbsp;&nbsp; ` +
          this.time +
          `&nbsp;&nbsp;文旅中国客户端</p>` +
          this.content +
          `
            </div>
          </body>
        </html>`;
      }
      this.iframesrc = "data:text/html," + encodeURIComponent(str);
    }
  },
  created() {
    this.addcontent();
  },
  watch: {
    content(val, oldval) {
      this.addcontent();
    },
    title(val, oldval) {
      this.addcontent();
    },
    time(val, oldval) {
      this.addcontent();
    },
    file(val, oldval) {
      this.addcontent();
    },
    author(val, oldval) {
      this.addcontent();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.phone-component {
  position: relative;
  display: inline-block;
  width: 332px;
  height: 678px;
  background-image: url("../../assets/images/6s.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  vertical-align: top;
  z-index: 999;
}

.phone-head {
  position: absolute;
  top: 81px;
  left: 22px;
  width: 288px;
  height: 58px;
  background-image: url("../../assets/images/phone-head.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}

.phone-head #go-back {
  color: #fff;
  cursor: pointer;
  position: absolute;
  left: 10px;
  top: 25px;
  font-size: 14px;
  line-height: 25px;
  padding-left: 14px;
  background-image: url("../../assets/images/left.png");
  background-size: auto 15px;
  background-repeat: no-repeat;
  background-position: left center;
}

.phone-content {
  position: absolute;
  top: 139px;
  left: 22px;
  width: 288px;
  height: 454px;
  overflow: hidden;
  background-color: #fff;
}

.preview-iframe {
  display: block;
  position: relative;
  width: 320px;
  height: 504px;
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -moz-transform: scale(0.9);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  outline: none;
  border: none;
}

.phone-component .page::-webkit-scrollbar,
iframe::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.phone-component .page.dialog-page {
  background-color: rgba(0, 0, 0, 0.5);
}

.phone-component.phone6plus {
  width: 332px;
  height: 670px;
  background-image: url("../../assets/images/6s.png");
}

.phone-component.phone6plus .phone-head {
  top: 81px;
  left: 22px;
  width: 288px;
}

.phone-component.phone6plus .phone-content {
  top: 139px;
  left: 22px;
  width: 288px;
  height: 446px;
}

.phone-component.phone6plus .preview-iframe {
  width: 320px;
  height: 495px;
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -moz-transform: scale(0.9);
}

.phone-component.phone5s {
  width: 312px;
  height: 648px;
  background-image: url("../../assets/images/5s.png");
}

.phone-component.phone5s .phone-head {
  top: 93px;
  left: 25px;
  width: 262px;
}

.phone-component.phone5s .phone-content {
  top: 150px;
  left: 26px;
  width: 260px;
  height: 405px;
}

.phone-component.phone5s .preview-iframe {
  width: 320px;
  height: 498px;
  transform: scale(0.8125);
  -webkit-transform: scale(0.8125);
  -ms-transform: scale(0.8125);
  -moz-transform: scale(0.8125);
}

.phone-component.phonenote4 {
  width: 340px;
  height: 665px;
  background-image: url("../../assets/images/note4.png");
}

.phone-component.phonenote4 .phone-head {
  top: 56px;
  left: 16px;
  width: 306px;
}

.phone-component.phonenote4 .phone-content {
  left: 17px;
  top: 114px;
  width: 305px;
  height: 497px;
}

.phone-component.phonenote4 .preview-iframe {
  width: 320px;
  height: 521px;
  transform: scale(0.953215);
  -webkit-transform: scale(0.953215);
  -ms-transform: scale(0.953215);
  -moz-transform: scale(0.953215);
}

.phone-component.phonep8 {
  width: 334px;
  height: 650px;
  background-image: url("../../assets/images/p8.png");
}

.phone-component.phonep8 .phone-head {
  top: 57px;
  left: 10px;
  width: 315px;
}

.phone-component.phonep8 .phone-content {
  top: 115px;
  left: 10px;
  width: 315px;
  height: 480px;
}

.phone-component.phonep8 .preview-iframe {
  width: 322px;
  height: 491px;
  transform: scale(0.978125);
  -webkit-transform: scale(0.978125);
  -ms-transform: scale(0.978125);
  -moz-transform: scale(0.978125);
}

.phone-component.phonemi4 {
  width: 330px;
  height: 660px;
  background-image: url("../../assets/images/mi4.png");
}

.phone-component.phonemi4 .phone-head {
  top: 63px;
  left: 17px;
  width: 296px;
}

.phone-component.phonemi4 .phone-content {
  top: 121px;
  left: 17px;
  width: 296px;
  height: 462px;
}

.phone-component.phonemi4 .preview-iframe {
  width: 322px;
  height: 503px;
  transform: scale(0.91875);
  -webkit-transform: scale(0.91875);
  -ms-transform: scale(0.91875);
  -moz-transform: scale(0.91875);
}

.phone-component.ipadair {
  width: 460px;
  height: 660px;
  background-image: url("../../assets/images/ipad-air.png");
}

.phone-component.ipadair .phone-head {
  top: 59px;
  left: 30px;
  width: 400px;
  height: 80px;
}

.phone-component.ipadair .phone-head > span {
  top: 40px;
}

.phone-component.ipadair .phone-content {
  top: 139px;
  left: 30px;
  width: 400px;
  height: 461px;
}

.phone-component.ipadair .preview-iframe {
  width: 323px;
  height: 373px;
  transform: scale(1.2375);
  -webkit-transform: scale(1.2375);
  -ms-transform: scale(1.2375);
  -moz-transform: scale(1.2375);
}
</style>
